{extend name="index/index" /}
{block name="main"}
<!-- Start of Page Container -->
<div class="page-container">
    <div style="margin-top: -35px;/*background: rgb(241,213,166);*/ background: #fff; box-shadow: 0 0 3px 2px  rgb(242,235,217);">
    <div class="container" style="margin: 36px auto;padding: 26px 0;overflow: hidden;">
        <div class="row">

                    <!-- start of page content -->
                    <div class="span10 offset1 main-listing">
                        <div>
                            <p style="/*padding-right: 60px; text-align: right;*/ margin-left: -36px;margin-bottom: 16px;">
                                <img src="/static/upload/{$data['photo']}" width="60px" height="60px" style="display: inline-block;border-radius: 50%;height: 60px;" border="0">
                                    <span style="font-size: 16px;">{$data['name']}&emsp;&emsp;{$data['time']}</span>
                            </p>
                            <h2 style="margin: 8px auto;font-size: 22px;font-weight: 700;font-family: inherit;color: #1e1e1e;">{$data['title']}</h2>
                            <p style="line-height: 25px; ">
                             {$data['content']}

                            </p>
                            <a style="display: none;text-align: right; color: #175199;font-size: 12px;" class="showContent">
                            展开全部
                            <svg viewBox="0 0 10 6" class="Icon ContentItem-arrowIcon Icon--arrow" width="10" height="16" aria-hidden="true" style="height: 10px; width: 16px;"><title></title><g><path d="M8.716.217L5.002 4 1.285.218C.99-.072.514-.072.22.218c-.294.29-.294.76 0 1.052l4.25 4.512c.292.29.77.29 1.063 0L9.78 1.27c.293-.29.293-.76 0-1.052-.295-.29-.77-.29-1.063 0z"></path></g></svg>
                            </a>
                            <br>
                            <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":["qzone","tsina","weixin","tqq","tieba","douban","sqq","meilishuo"],"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
                            <div>
                                <a href="#inputanswer" class="btn btn-large btn-success" style="margin:16px auto; color: #fff;">我来回答</a>
                                <a href="javascript:$('#msg-Modals').css('display','block');" class="btn btn-large btn-success" style="margin:16px auto; color: #fff;">私信题主</a>
                            </div>

                            <br>
                        </div>
                        <!-- 问题部分结束 -->
                    </div>
        </div>
    </div>
    </div>
    <?php if(!empty($answer)): ?>
    <!-- 回答及回复容器 -->
    <div class="container" style="margin: 36px auto;overflow: hidden; background: none;">
        <div class="row">

            <div class="span10 main-listing" style="margin-left: 82px; ">

                        {volist name="answer" id="v"}
                        <article class="format-standard type-post hentry clearfix answer-container" style="display: block;margin:12px -12px;padding: 8px 26px 10px 52px; border: 1px solid #ccc;border-radius: 5px;background: rgb(248,248,248);">

                                <header class="clearfix">

                                        <div class="post-title" style="margin-left:-30px;background: none;padding: 0;font-size: 16px">
                                                <img src="/static/upload/{$v['photo']}" width="60px" height="60px" style="display: inline-block;border-radius: 50%;height: 60px;" border="0">
                                                {$v['name']}
                                                <span style="font-size: 12px;">{$v['time']}</span>
                                                
                                        </div>


                                </header>

                                <p style="padding-left:6px; line-height: 25px; font-family: serif; font-size: 14px; color: #666;">
                                        <p style="padding-left: 32px;">{$v['content']}</p>
                                </p>
                                <!-- <a style="display: none; float: right;"  class="card__link card__readmore showContent">展开内容</a> -->
                                <div class="card__meta">
                                        <a href="javascript:reply('{$v['aid']}');"><span class="card__meta-label card__meta-comments">评论</span></a>
                                        <span class="card__meta-label card__meta-likes laud" motion="answer" aid="{$v['aid']}" url="{:url('index/question/likes')}">{$v['likes']}</span>
                                </div>
                                {volist name="replys[$v['aid']]" id="r"}
                                <article class="format-standard type-post hentry clearfix" style="margin:3px 0;padding:8px 16px; border: 1px solid #ccc;background: rgb(248,248,248);">


                                        <p style="padding-left:6px; line-height: 25px; font-family: serif; font-size: 14px; color: #666;">
                                                {$r['name']}： {$r['content']}
                                                <span style="float: right;">{$r['time']}</span>
                                        </p>
                                
                                </article>
                                {/volist}

                        </article>
                        {/volist}

            </div>
                <!-- end of page content -->


        </div>
    </div>
    <?php else: ?>
        <div style="margin: -36px; padding: 30px; text-align: center;background: #fff;color: #FF0EB5;font-size: 15px;">
            这个问题暂时还没有人回答哦<br>
            快来抢沙发吧~
        </div>
    <?php endif ?>

    <div style="margin: -34px 0;/*background: rgb(241,213,166);*/ background: #fff; box-shadow: 0 0 3px 2px  rgb(242,235,217);">
    <div class="container" style="margin: 36px auto;padding: 26px 0;overflow: hidden;">
        <div class="row">

                    <!-- start of page content -->
                    <div class="span10 main-listing" style="margin-left: 110px; " >
                        
                        <span id="inputanswer"></span>
                        <form style="padding-top:36px;">
                        <!--style给定宽度可以影响编辑器的最终宽度-->
                                <script type="text/plain" id="myEditor" style="width:100%;height:240px;">
                                  <p>想说点什么呢？</p>
                                </script>
                                <div class="clear"></div>
                                <button type="button" class="btn btn-large btn-success answer-botton" style="display: block; margin:16px auto; color: #fff;" url="{:url('index/question/reply')}" qid="{$data['id']}" motion="answer">发表回答</button>
                        </form>
                        
                    </div>
        </div>
    </div>
    </div>
</div>
<!-- End of Page Container -->

<!-- 评论模态框 -->
<div id="Modals" style="position:fixed;top: 0;height: 100%;width:100%;background-color: rgba(255, 251, 240,0.5);z-index: 99999;display:none;">
    
        <div style="margin:16% auto;padding:16px;width:860px;border:1px solid #999;border-radius:16px;background:#ccc/*rgba(255, 255, 239,0.9)*/;" id="Modals-frame">
                <a href="javascript:$('#Modals').css('display','none');" class="btn btn-danger" style=" display: block; float: right; margin: -12px -12px 0 0; border-radius: 50%;">X</a>
                <form id="reply-formsss">
                        <input type="hidden" name="motion" value="reply">
                        <input type="hidden" name="aid" id="replyAid">
                        <input type="hidden" name="qid" value="{$data['id']}">
                        <textarea name="content" rows="4" style="padding:12px;width: 100%; border-radius: 15px; line-height: 25px;"></textarea>
                </form>
                <button class="btn btn-success" style="margin: 12px auto 0; display: block;" id="reply-submit" url="{:url('index/question/reply')}">发表回复</button>

        </div>
</div>

<!-- 私信模态框 -->
<div id="msg-Modals" style="position:fixed;top: 0;height: 100%;width:100%;z-index: 99999;display:none;">
    
        <div style="margin:16% auto;padding:16px;width:680px;border:1px solid #999;border-radius:16px;background:#ccc/*rgba(255, 255, 239,0.9)*/;" id="msg-Modals-frame">
                <span>给<span style="color: blue;">{$data['name']}</span>发私信</span>
                <a href="javascript:$('#msg-Modals').css('display','none');" class="btn btn-danger" style=" display: block; float: right; margin: -12px -12px 0 0; border-radius: 50%;">X</a>
                <form id="msg-formsss">
                        <input type="hidden" name="motion" value="msg">
                        <input type="hidden" name="rid" value="{$data['uid']}">
                        <input type="hidden" name="qid" value="{$data['id']}">
                        <textarea name="content" rows="3" style="padding:12px;width: 100%; border-radius: 15px; line-height: 25px;" id="msg-content"></textarea>
                </form>
                <button class="btn btn-success" style="margin: 12px auto 0; display: block;" id="msg-submit" url="{:url('index/msg/save')}">发送</button>

        </div>
</div>

<script type="text/javascript">
        function reply(id) {
                replyAid.value = "";
                replyAid.value = id;
                Modals.style.display = "block";
        }

      $('.laud').click(function (){
            var str = $(this).attr('motion') == "question" ? '收藏' : '点赞' ;
            $.ajax({
                type: 'post',
                data: {
                        "qid":$(this).attr('qid'),
                        "aid":$(this).attr('aid'),
                        "motion":$(this).attr('motion')
                      },
                url: $(this).attr('url'),
                success: function (data) {
                        console.log(data);
                        if (data == '已存在') {
                          alert('您已'+str+'过，无需重复操作');
                          return;
                        }else if(data != 1){
                          alert('操作失败，请重试');
                          return;
                        }
                        // location = location;
                },
                error: function () {
                    alert('执行失败，请重试');
                }
            });
      });

      $('#reply-submit').click(function (){
            var info = $('#reply-formsss').serialize();
            // console.log(info);
            // return;
            $.ajax({
                type: 'post',
                data: info,
                url: $(this).attr('url'),
                success: function (data) {
                        console.log(data);
                        if (data != 1) {
                          alert('回复失败！');
                          return;
                        }
                        location = location;
                },
                error: function () {
                    alert('执行失败，请重试');
                }
            });
      });
      $('#msg-submit').click(function (){
            var info = $('#msg-formsss').serialize();
            console.log(info);
            // return;
            $.ajax({
                type: 'post',
                data: info,
                url: $(this).attr('url'),
                success: function (data) {
                        console.log(data);
                        if (data.status == 3) {
                          alert('请先登录！');
                          if (confirm('登陆后才能干这种事哦，去登陆不？')) {
                            location = $('#LoginURL').attr('url');
                          }
                          return;
                        }
                        if (data.status == 'ok') {
                            $('#msg-Modals').css('display','none');
                            $('#msg-content').val('');
                            ajaxTips(data.info);
                        }
                        if (data.status == '2') {
                            // $('#msg-Modals').css('display','none');
                            // $('#msg-content').val('');
                            alert(data.info);
                        }
                },
                error: function () {
                    ajaxTips('操作失败，请重试!','red');
                }
            });
      });
</script>
    <!-- 百度编辑器JS -->
    <script type="text/javascript">
      //实例化编辑器
      var um = UM.getEditor('myEditor');
      function getContent() {
          var arr = [];
          arr.push("使用editor.getContent()方法可以获得编辑器的内容");
          arr.push("内容为：");
          arr.push(UM.getEditor('myEditor').getContent());
          alert(arr.join("\n"));
      }
      $('.answer-botton').click(function (){
            var cont = UM.getEditor('myEditor').getContent();
            $.ajax({
                type: 'post',
                data: {
                        "content": cont,
                        "qid":$(this).attr('qid'),
                        "motion":$(this).attr('motion')
                      },
                url: $(this).attr('url'),
                success: function (data) {
                        console.log(data);
                        if (data != 1) {
                          alert('回复失败！');
                          return;
                        }
                        location = location;
                },
                error: function () {
                    ajaxTips('操作失败，请重试!','red');
                }
            });
      });
  </script>

{/block}